<template>
  <h3>嵌套命名视图+嵌套路由</h3>
  <hr>

  <div class="us__nav">
    <router-link class="link" to="/nestednamedviews/one">First Page</router-link>
    <router-link class="link" to="/nestednamedviews/other">Other Page</router-link>
  </div>

  <router-view class="us__content" />
  <router-view name="other" class="us__content us__content--helper" />

  <hr>
  <p>
    注意: <br>
    1. 我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件。<br>
    官方文档: <a href="https://router.vuejs.org/zh/guide/essentials/named-views.html#%E5%B5%8C%E5%A5%97%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE"><b>嵌套命名视图</b></a>
  </p>
</template>

<style scoped>

.router-link-active {
  font-weight: bold;
  color: orange;
}

.router-link-exact-active {
  color: crimson;
}

.us__nav {
  grid-area: nav;
  border: 1px dotted;
  margin-right: 0.75rem;
  padding: 0.3rem;
}

.link {
  margin-left: 10px;
}

.us__content {
  grid-area: content;
}
.us__content--helper {
  grid-area: helper;
}

</style>